<template>
  <view class="container">
    <!-- 圆角输入框 -->
    <input
      class="rounded-input"
      placeholder="请输入内容"
      placeholder-class="placeholder-style"
      @input="handleInput"
      :value="modelValue"
    />
  </view>
</template>
<script setup>
import { ref } from 'vue'
const modelValue = ref('')

const handleInput = (e) => {
  const value = e.detail.value
  modelValue.value = value
}
function get_input_value() {
  // console.log('====get_input_value====')
  // console.log(modelValue.value)
  // console.log('====get_input_value_end====')
  return modelValue.value
}
function set_input_value(str) {
  if (str === '') {
    return
  }
  modelValue.value = str
}

defineExpose({ get_input_value, set_input_value })
</script>

<style>
.rounded-input {
  width: 80%; /* 宽度 */
  height: 40px; /* 高度 */
  padding: 0 10px; /* 内边距 */
  border-radius: 20px; /* 圆角半径（值为高度的一半可形成胶囊形状） */
  border: 1px solid #ccc; /* 边框 */
  background-color: #f8f8f8; /* 背景色 */
}

/* 可选：修改 placeholder 样式 */
.placeholder-style {
  color: #999;
  font-size: 14px;
}
</style>
